<route lang="json5">
  {
    style: {
      navigationBarTitleText: '我的团队',
    },
  }
  </route>
<template>
  <view class="team-page">
    <!-- 数据统计区域 -->
    <view class="statistics-card">

      <view class="stat-row">
        <view class="stat-item">
          <text class="stat-value">{{ indexData.total_person_num }}</text>
          <text class="stat-label">总人数</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ indexData.total_team_cargo_value }}</text>
          <text class="stat-label">团队业绩</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ indexData.total_person_cargo_value }}</text>
          <text class="stat-label">个人业绩</text>
        </view>
      </view>
    </view>

    <!-- 客户列表标题 -->
    <view class="customer-title">
      <text class="title-text">我的客户列表({{ customers.length }})</text>
    </view>

    <!-- 列表表头 -->
    <view class="list-header">
      <text class="header-item">昵称</text>
      <text class="header-item">ID</text>
      <text class="header-item">业绩</text>
    </view>

    <!-- 列表内容区域 -->
    <scroll-view class="customer-list" scroll-y @scrolltolower="loadMore" @refresherrefresh="onRefresh"
      :refresher-enabled="true" :refresher-triggered="isRefreshing">
      <view v-if="customers.length === 0" class="empty-state">
        <text class="empty-text">暂无更多数据</text>
      </view>
      <view v-else class="customer-item" v-for="customer in customers" :key="customer.id">
        <text class="customer-name">{{ customer.nickname }}</text>
        <text class="customer-id">{{ customer.id }}</text>
        <text class="customer-count">{{ customer.total_money }}</text>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getTeamListAPI } from '@/service/index/index'
const teamVipCount = ref(0)
const freeUserCount = ref(0)
const personalPerformance = ref(99.61)
const teamPerformance = ref(0)
const customerCount = ref(0)
const isRefreshing = ref(false)

const customers = ref([])

const indexData = ref({
  total_person_cargo_value: 0,
  total_person_num: 0,
  personalPerformance: 0,
  total_team_cargo_value: 0,
  total_vip_person_num: 0,
})
// 下拉刷新
const onRefresh = async () => {
  isRefreshing.value = true
  await new Promise((resolve) => setTimeout(resolve, 1000))
  isRefreshing.value = false
}

// 加载更多
const loadMore = () => {
  // 模拟加载更多数据
}

const getTeamList = () => {
  getTeamListAPI({}).then((res) => {
    console.log(res)
    indexData.value.total_person_cargo_value = res.data.total_person_cargo_value
    indexData.value.total_person_num = res.data.total_person_num
    indexData.value.personalPerformance = res.data.personalPerformance
    indexData.value.total_team_cargo_value = res.data.total_team_cargo_value
    indexData.value.total_vip_person_num = res.data.total_vip_person_num
    customers.value = res.data.list
  })
}
//#ifdef APP-PLUS || MP-WEIXIN
onLoad(() => {
  getTeamList()
})
//#endif
//#ifdef H5
onMounted(() => {
  getTeamList()
})
//#endif
</script>

<style scoped>
page {
  height: 100%;
}

.team-page {
  min-height: 100%;
  padding: 20rpx;
  background-color: #f7f7f7;
}

.statistics-card {
  padding: 40rpx 40rpx;
  margin-bottom: 30rpx;
  background: linear-gradient(135deg, #ff7a59 0%, #ff4d4d 100%);
  border-radius: 16rpx;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.stat-row:last-child {
  margin-bottom: 0;
}

.stat-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  margin-bottom: 8rpx;
  font-size: 24px;
  font-weight: 500;
  color: #ffffff;
}

.stat-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.customer-title {
  margin: 30rpx 0;
}

.title-text {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}

.list-header {
  display: flex;
  padding: 20rpx 30rpx;
  margin-bottom: 2rpx;
  background-color: #ffffff;
  border-radius: 8rpx 8rpx 0 0;
}

.header-item {
  flex: 1;
  font-size: 14px;
  color: #666666;
  text-align: center;
}

.customer-list {
  height: 800rpx;
  background-color: #ffffff;
  border-radius: 0 0 8rpx 8rpx;
}

.customer-item {
  display: flex;
  padding: 30rpx;
  border-bottom: 1px solid #f5f5f5;
}

.customer-name,
.customer-id,
.customer-count {
  flex: 1;
  font-size: 14px;
  color: #333333;
  text-align: center;
}

.empty-state {
  padding: 60rpx 0;
  text-align: center;
}

.empty-text {
  font-size: 14px;
  color: #999999;
}
</style>
